<template>
    <div>
        <ul class="gs01">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <li v-for="item in list" :key="item.id">
                    <router-link :to="{path:'/tap-water/sjxxDetail',query:{id:item.id}}" >
                        <span>{{item.noticeTitle}}</span>
                        <img src="@/assets/tap-water/images/fh03.png" alt="">
                    </router-link>
                    <p>{{item.createTimeStr}}</p>
                </li>
            </van-list>
        </ul>
    </div>
</template>

<script>
    import home from '@/api/tap-water/home';
    import Vue from 'vue'
    import {List} from 'vant';

    Vue.use(List);

    export default {
        data() {
            return {
                list: [],
                page: 1,
                limit: 10,
                pageAll: 0,
                loading: false,
                finished: false,
                noData: false, // 如果没有数据，显示暂无数据
            };
        },
        methods: {
            getSjxiList(page, limit, type) {
                home.getListByType(page, limit, type)
                    .then(response => {
                        this.page++;
                        this.pageAll = Math.ceil(response.data.count / this.limit);
                        this.list = this.list.concat(response.data.data);

                        // 如果没有数据，显示暂无数据
                        if (this.list.length === 0 && this.page === 1) {
                            this.noData = true
                        }
                        // 如果加载完毕，显示没有更多了
                        if (response.data.data.length === 0) {
                            this.finished = true
                        }

                        // 加载状态结束
                        this.loading = false;

                        // 数据全部加载完成
                        if (this.page > this.pageAll) {
                            this.finished = true;
                        }
                    });
            },
            onLoad: function () {
                this.getSjxiList(1, 10, "水价信息");
            },
        }
    }
</script>

<style scoped>
    @import "../../assets/tap-water/css/base.css";
    @import "../../assets/tap-water/css/other.css";
    @import "../../assets/sfj/css/resetui.css";
</style>
